<template>
    <div>
      <el-table
        stripe
        ref="table"
        :data="dataList"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          show-overflow-tooltip
          :prop="item.prop"
          v-if="item.visible"
          :label="item.label"
          align="center"
        >
          <template slot-scope="{ row }">
<!--            <template >-->
<!--              <component :type="displayItemType(item)" :is="displayComponent(item)">{{displayValue(row[item.prop],item)}}</component>-->
<!--            </template>-->
              <template  v-if="item.display">
                <component  v-if="item.display.component" :type="displayItemType(item)" :is="displayComponent(item)">{{displayValue(row[item.prop],item)}}</component>
                <slot v-if="item.display.slotName" :slotName="item.display.slotName" :row="row"></slot>
              </template>
              <template v-else>
                {{displayValue(row[item.prop],item)}}
              </template>
            </template>

        </el-table-column>
        <el-table-column v-if="showOperation" label="操作"  :width="operationWidth" align="center">
          <template slot-scope="{ row }">
            <div class="flex-row-center">
              <el-button
                v-for="(it ,idx) in operation"
                :key="idx"
                v-if="showOperationItem(row,it)"
                type="text"
                size="mini"
                :v-hasPermi="permission ? [`${permission}:${it}`]:undefined"
                @click="doOperation(it,row)"
              >
                {{doParse(it)}}
              </el-button>
              <slot name="table-operation" :row="row"></slot>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <div class="flex-row-right">
        <a-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pagechange"
          @handleSizeChange="handleSizeChange"
        />
      </div>
      </div>

</template>
<script>
import atools from './index'
export default {
  computed:{
    showOperationItem(){
      return function (row,item){
        if(typeof item === 'string'){
          return true
        }
        if(typeof item === 'object'){
          if(item?.showFunc){
             return item?.showFunc(row)
          }
          return  true
        }
      }
    },
    displayItemType(){
      return function (e){
        return e?.display?.type
      }
    },
    displayComponent(){
      return function (e){
        return e?.display?.component ?? 'span'
      }
    },
    displayValue(){
      return function (value,item){
         if(item.display?.options){
           return  item?.display?.options?.find(i=>i.value === value)?.label ?? value
         }
         if(item.display?.func){
           return item.display?.func(value)
         }
         return value ?? '-'
      }
    },
    doParse(){
      return function (e){
         const key = e?.key ?? e
          if(e?.label){
            return e?.label
          }
         if(key === 'info' ){
           return  "详情"
         }
        if(key === 'add'){
          return "新增"
        }
        if(key === 'edit'){
          return "编辑"
        }
        if(key === 'delete'){
          return "删除"
        }
      }
    }
  },

  props:{
    data: undefined,
    columns: {
      type: Array,
      default: () => []
    },
    operation:{
      type: Array,
      default: ['info','add','edit','delete']
    },
    operationWidth:{
      type:String,
      default:'100px'
    },
    showOperation:{
      type:Boolean,
      default:true
    },
    permission:{
      type:String,
      default:undefined
    },
    id:{
      type:String,
      default:'id'
    }
  },
  data(){
    return{
      dataList:[],
      columns_:[],
      total:0,
      queryParams:{
        pageNum:1,
        pageSize:10
      },
    }
  },
  methods:{
    resetPageNum(){
      this.queryParams.pageNum = 1
    },
    handleSizeChange(){
      this.resetPageNum()
    },
    pagechange(e){
      this.$emit('pagechange',this.queryParams)
    },
    doOperation(type,data){
      console.log(type,data)
      if(type === 'delete'){
        this.$confirm('确定删除吗？','提示').then(()=>{
          this.$emit('todo', type,data)
        })
      }else {
        this.$emit('todo', type, data)
      }
    }
  },
  watch:{
    columns:{
      handler(newVal,oldVal){
        this.columns_ = (newVal ??[])
      },
      deep:true
    },
    data:{
      handler(newVal){
        const list = newVal?.data?.records ?? newVal?.data ?? []
        this.dataList = list.map(e=>{
          this.columns_.forEach(i=>{
            if(i.dataType === 'json'){
               e[i.prop] = atools.$jsonParse(e[i.prop])
            }
          })
          return e
        })
        this.total = newVal?.page?.totalCount ?? newVal?.data?.total ?? 0
      },
      deep:true
    }
  }
}
</script>
<style scoped lang="scss">

</style>
